<template>
	<view class="pages">
		<view class="flex align-center justify-center u-font-28 color999 u-m-b-60">
			<u-image class="u-m-r-20" mode="widthFix" width="92"
				src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/10/36dc4845110f4e6eb288cf563899171d.png"></u-image>
			输入以下信息立即查看可调剂大学专业
		</view>
		<view class="bg-white item" @click="showPicker = true">
			<u-icon
				name="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/11/10/ab49f343ee3841d5b6eaf99feaca9487.png"
				size="32" class="u-m-r-10"></u-icon>
			<view class="text-ellipsis">
				{{handleChooseArrVal || '选择报考的大学和专业'}}
			</view>
			<u-icon class="arrowRight" name="arrow-right" size="20" color="#000"></u-icon>
		</view>

		<view class="bg-white item" @click="handlePopup(5)">
			<u-icon name="edit-pen" color="#999999" size="32" class="u-m-r-10"></u-icon>
			<view class="">
				<text v-if="flag2">初试成绩</text>
				<view v-if="!flag2" style="font-size: 24rpx;">
					<text class="tag">总</text>
					{{scroll1}}
					<text class="line"> | </text>
					<text class="tag">英</text>
					{{scroll2}}
					<text class="line"> | </text>
					<text class="tag">政</text>
					{{scroll3}}
					<text class="line"> | </text>
					<text class="tag">专一</text>
					{{scroll4}}
					<text class="line"> | </text>
					<text class="tag">专二</text>
					{{scroll5}}
				</view>
			</view>
			<u-icon class="arrowRight" name="arrow-right" size="20" color="#000"></u-icon>
		</view>
		<view class="bg-white item" @click="handlePopup(7)">
			<u-icon name="edit-pen" color="#999999" size="32" class="u-m-r-10"></u-icon>
			<view class="text-ellipsis">
				<text v-if="flag3">输入基础信息</text>
				<text v-if="!flag3">
					<text>{{name1}}</text>
					<text class="u-m-l-40">{{phone1}}</text>
					<text class="u-m-l-40">毕业于{{daxue1}}</text>
				</text>
			</view>
			<u-icon class="arrowRight" name="arrow-right" size="20" color="#000"></u-icon>
		</view>
		<view class="submit" @click="submit">
			提交
		</view>
		<view class="pickerLayer" v-if="showPicker">
			<view class="layerMain">
				<view class="layerTitle flex alignCenter">
					<view class="cancel font14 colorccc" @click="closeClick">取消</view>
					<view class="title">选择报考学院及专业</view>
					<view class="sure font14 colorMain" @click="handleSureMajor">确定</view>
				</view>
				<scroll-view scroll-x="true">
					<view class="flex alignCenter font14 chooseBox">
						<view :class="flag7==0?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(0)">{{chooseArr[0].fullName||"请选择"}}</view>
						<view :class="flag7==1?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(1)" v-if="flag7!=0">{{chooseArr[1].title||"请选择"}}</view>
						<view :class="flag7==2?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(2)" v-if="flag7>=2">{{chooseArr[2].text||"请选择"}}</view>
						<view :class="flag7==3?'commonChoose activeLayerStyle hiddenOneline':'commonChoose hiddenOneline'"
							@click="qing(3)" v-if="flag7>=4">{{chooseArr[3].text||"请选择"}}</view>
					</view>
				</scroll-view>
				<!-- 请求展示的·数据 -->

				<view class="dataBox">
					<scroll-view scroll-y="true" class="font14 dataScroll">
						<template v-if="flag6===0">
							<view v-for="(i,index) in shengfen1" :key="index"
								:class="i.fullName==chooseArr[0].fullName?'scrollItem colorMain':'scrollItem'" @click="cho1(index)">
								{{i.fullName}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.fullName==chooseArr[0].fullName"></uni-icons>
							</view>
						</template>
						<template v-if="flag6===1">
							<view v-for="(i,index) in xuexiao1[0]" :key="index"
								:class="i.title==chooseArr[1].title?'scrollItem colorMain':'scrollItem'" @click="cho2(index)">
								({{i.schoolCode}}){{i.title}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.title==chooseArr[1].title"></uni-icons>
							</view>
						</template>
						<template v-if="flag6===2">
							<view v-for="(i,index) in xueyuanlist1" :key="index"
								:class="i.text==chooseArr[2].text?'scrollItem colorMain':'scrollItem'" @click="cho3(index)">
								({{i.value}}){{i.text}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.text==chooseArr[2].text"></uni-icons>
							</view>
						</template>
						<template v-if="flag6===3">
							<view v-for="(i,index) in zhuanyelist1" :key="index"
								:class="i.text==chooseArr[3].text?'scrollItem colorMain':'scrollItem'" @click="cho4(index)">
								({{i.value}}){{i.text}}
								<uni-icons class="activeIcon" type="checkmarkempty" size="16"
									v-if="i.text==chooseArr[3].text"></uni-icons>
							</view>
						</template>
					</scroll-view>
				</view>
			</view>
		</view>
		<u-popup v-model="searchPopup" mode="bottom" :mask-close-able="false">
			<view class="popup-box">
				<view class="flex btns">
					<view class="font14 cancel" @click="handleCancel">取消</view>
					<view class="font14 sure" @click="handleSure">确认</view>
				</view>
				<view class="search-contents" :class="popType == 4?'search-contents-more':''">
					<!-- 估分 -->
					<view v-if="popType==5">
						<view>
							<view class="subject">英语</view>
							<u-input placeholder="请输入英语分数" type="number" border @blur="handleScroll2" v-model="scroll2"></u-input>
						</view>
						<view>
							<view class="subject">政治</view>
							<u-input placeholder="请输入政治分数" type="number" border @blur="handleScroll3" v-model="scroll3"></u-input>
						</view>
						<view>
							<view class="subject">专业一 <text class="tips">（数学类或专业课一，不超过150分）</text></view>
							<u-input placeholder="请输入专业一分数" type="number" border @blur="handleScroll4" v-model="scroll4"></u-input>
						</view>
						<view>
							<view class="subject">专业二 <text class="tips">（专业课二或两门专业课，不超过300分）</text></view>
							<u-input placeholder="请输入专业二分数" type="number" border @blur="handleScroll5" v-model="scroll5"></u-input>
						</view>
						<view>
							<view class="subject">总分</view>
							<u-input placeholder="请输入总分" type="number" border v-model="totalScroll1"></u-input>
						</view>
					</view>
					<view v-if="popType==7">
						<view>
							<view class="subject">姓名</view>
							<u-input placeholder="请输入姓名" type="text" border v-model="name1"></u-input>
						</view>
						<view>
							<view class="subject">电话</view>
							<u-input placeholder="请输入电话" type="tel" border v-model="phone1"></u-input>
						</view>
						<view>
							<view class="subject">选择本科毕业大学</view>
							<u-input @click="openSchool" placeholder="请选择本科毕业大学" disabled border v-model="daxue"></u-input>
						</view>
						<view>
							<view class="subject">本科毕业专业</view>
							<u-input @click="openZy" placeholder="请选择本科毕业专业" disabled border v-model="zhuanye"></u-input>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getCityList,
		getdaxue1,
		getxueyuan,
		getzhuanye1
	} from "@/api/toolbox.js"
	export default {
		data() {
			return {
				searchPopup: false,
				flag3: true,
				daxue1: "",
				chooseSchoolCode: "",
				name1: "",
				phone1: "",
				daxue: "",
				zhuanye: "",
				popType: 1,
				scroll1: "",
				scroll2: "",
				scroll3: "",
				scroll4: "",
				scroll5: "",
				flag2: true,
				shengfen2: {
					"pageNum": 1,
					"pageSize": 999999,
					"reasonable": true,
					"year": "",
					"areaId": "1475405387606917120"
				},
				zhuanyelist1: [],
				xueyuanlist1: [],
				xuexiao1: [],
				shengfen1: [],
				flag6: 0,
				chooseArr: [{}, {}, {}, {}],
				flag7: 0,
				showPicker: false,
				isBack: false, //点击提交是否有返回
			}
		},
		onLoad(e) {
			uni.setStorageSync('isEdit', 1);
			this.isBack = e.back == 1;
			let storeSync = uni.getStorageSync('chooseArr');
			let storeSyncFraction = uni.getStorageSync('fraction');
			let storeSyncInformation = uni.getStorageSync('information');
			if (storeSyncInformation) {
				this.flag3 = false;
				storeSyncInformation = JSON.parse(storeSyncInformation);
				this.name1 = storeSyncInformation.name1;
				this.phone1 = storeSyncInformation.phone1;
				this.daxue = storeSyncInformation.daxue;
				this.zhuanye = storeSyncInformation.zhuanye;
			}

			if (storeSyncFraction) {
				this.flag2 = false;
				storeSyncFraction = JSON.parse(storeSyncFraction);
				this.scroll1 = storeSyncFraction.scroll1;
				this.scroll2 = storeSyncFraction.scroll2;
				this.scroll3 = storeSyncFraction.scroll3;
				this.scroll4 = storeSyncFraction.scroll4;
				this.scroll5 = storeSyncFraction.scroll5;
			}
			if (storeSync) {
				this.chooseArr = JSON.parse(storeSync);
			}

			this.getAreaList();
		},
		onShow() {
			if (uni.getStorageSync('chooseMajorObj')) {
				let majorObj = uni.getStorageSync('chooseMajorObj');
				this.zhuanye = majorObj.majorName;
				uni.removeStorageSync('chooseMajorObj');
			}
			if (uni.getStorageSync('chooseSchoolObj')) {
				let schoolObj = uni.getStorageSync('chooseSchoolObj');
				this.daxue = schoolObj.schoolName;
				this.chooseSchoolCode = schoolObj.schoolCode;
				uni.removeStorageSync('chooseSchoolObj');
			}
		},
		watch: {
			daxue: function(val) {
				if (this.daxue.length > 4) {
					let j = this.daxue.split('')
					let s = ""
					for (let i = 0; i < 4; i++) {
						s = s + j[i]
					}
					this.daxue1 = s + "......"
				} else {
					this.daxue1 = this.daxue
				}
			},
		},
		computed: {
			totalScroll1() {
				let num = 0;
				for (let i = 2; i < 6; i++) {
					let count = this[`scroll${i}`] ? Number(this[`scroll${i}`]) : 0;
					num += count;
				}
				this.scroll1 = num || '';
				return this.scroll1 || '';
			},
			handleChooseArrVal() {
				let str = '';
				this.chooseArr.forEach((e, i) => {
					switch (i) {
						case 0:
							str += this.chooseArr[1].title || '';
							break;
						case 1:
							str += this.chooseArr[2].text || '';
							break;
						case 2:
							str += this.chooseArr[3].text || '';
							break;
						case 3:
							str += this.chooseArr[3].value || '';
							break;
					}
				})
				return str;
			}
		},
		methods: {
			submit() {
				if (!this.name1 || !this.phone1 || !this.daxue || !this.zhuanye) {
					uni.showToast({
						title: '请输入基础信息！',
						icon: 'none'
					});
					return;
				}
				if (!this.scroll1 || !this.scroll2 || !this.scroll3 || !this.scroll4 || !this.scroll5) {
					uni.showToast({
						title: '请输入初试成绩！',
						icon: 'none'
					});
					return;
				}
				if (this.chooseArr[0] == {} || this.chooseArr[1] == {} || this.chooseArr[2] == {} || this.chooseArr[3] == {}) {
					uni.showToast({
						title: '请选择报考大学和专业！',
						icon: "none",
					});
					return
				}
				if (this.scroll1 > 500) {
					uni.showToast({
						title: '总分不可大于500分',
						icon: 'none'
					});
					return;
				}
				if (this.isBack) {
					uni.navigateBack(1);
					return;
				}
				uni.redirectTo({
					url: '/pages/toolbox/makeMap/makeMap'
				})
			},
			handlePopup(type) {
				this.popType = type;
				this.searchPopup = true;
			},
			openZy() {
				if (!this.chooseSchoolCode) {
					uni.showToast({
						title: '请先选择本科毕业学校',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/toolbox/adjustReport/searchSpeciality?schoolCode=' + this.chooseSchoolCode
				});
			},
			openSchool() {
				uni.navigateTo({
					url: '/pages/toolbox/adjustReport/searchSchool',
				});
			},
			//总分限制
			handleScroll1() {
				if (this.scroll1 > 500) {
					uni.showToast({
						title: '不能超过500分',
						icon: 'none'
					});
					this.scroll1 = 500;
					return;
				}
			},
			handleScroll2() {
				if (this.scroll2 > 100) {
					uni.showToast({
						title: '不能超过100分',
						icon: 'none'
					});
					this.scroll2 = 100;
					return;
				}
			},
			handleScroll3() {
				if (this.scroll3 > 100) {
					uni.showToast({
						title: '不能超过100分',
						icon: 'none'
					});
					this.scroll3 = 100;
					return;
				}
			},
			handleScroll4() {
				if (this.scroll4 > 150) {
					uni.showToast({
						title: '不能超过150分',
						icon: 'none'
					});
					this.scroll4 = 150;
					return;
				}
			},
			handleScroll5() {
				if (this.scroll5 > 300) {
					uni.showToast({
						title: '不能超过300分',
						icon: 'none'
					});
					this.scroll5 = 300;
					return;
				}
			},

			handleSure() {
				/**
				 * 1  学校学科专业
				 * 5  初试成绩估分
				 * 7  个人基础信息
				 */
				if (this.popType === 7) {
					if (this.name1 == "" || this.phone1 == "" || this.daxue == "" || this.zhuanye == "") {
						uni.showToast({
							title: '请填写完基础信息！',
							icon: 'none'
						});
						return;
					}
					let information = {
						name1: this.name1,
						phone1: this.phone1,
						daxue: this.daxue,
						zhuanye: this.zhuanye,
					}
					uni.setStorageSync('information', JSON.stringify(information))
				}

				// 学习形式
				if (this.name1 == "" && this.phone1 == "" && this.daxue == "" && this.zhuanye == "") {
					this.flag3 = true
				} else {
					this.flag3 = false
				}
				if (this.scroll1 > 500) {
					uni.showToast({
						title: '总分不能大于500分',
						icon: 'none'
					});
					return
				}
				if (this.scroll1 == "" && this.scroll2 == "" && this.scroll3 == "" && this.scroll4 == "" && this.scroll5 == "") {
					this.flag2 = true
				} else {
					this.flag2 = false
				}
				// 估分
				if (this.popType == 5) {
					let fraction = {
						scroll1: this.scroll1,
						scroll2: this.scroll2,
						scroll3: this.scroll3,
						scroll4: this.scroll4,
						scroll5: this.scroll5,
					}
					uni.setStorageSync('fraction', JSON.stringify(fraction))
				}
				// 更多
				this.searchPopup = false;
			},
			// 搜索弹框取消按钮
			handleCancel() {
				if (this.scroll1 == "" && this.scroll2 == "" && this.scroll3 == "" && this.scroll4 == "" && this.scroll5 == "") {
					this.flag2 = true
				} else {
					this.flag2 = false
				}
				if (this.popType == 5) {
					this.scroll1 = "";
					this.scroll2 = "";
					this.scroll3 = "";
					this.scroll4 = "";
					this.scroll5 = "";
				}
				this.searchPopup = false;
			},
			getAreaList() {
				getCityList().then((res) => {
					this.shengfen1 = res.data
				})
			},
			qing(value) {
				this.flag7 = value
				this.flag6 = value
				if (value == 0) {
					this.xuexiao1 = []
					this.xueyuanlist1 = []
					this.zhuanyelist1 = []
					this.$set(this.chooseArr, 1, {})
					this.$set(this.chooseArr, 2, {})
					this.$set(this.chooseArr, 3, {})
				}
				if (value == 1) {
					this.xueyuanlist1 = []
					this.$set(this.chooseArr, 2, {})
					this.$set(this.chooseArr, 3, {})
				}
				if (value == 2) {
					this.zhuanyelist1 = []
					this.$set(this.chooseArr, 3, {})
				}

			},
			cho1(value) {
				this.$set(this.chooseArr, 0, this.shengfen1[value])
				this.$set(this.shengfen2, "areaId", this.shengfen1[value].id)
				getdaxue1(this.shengfen2).then((res) => {
					this.xuexiao1 = []
					this.xuexiao1.push(res.data.rows)

				})
				this.flag6 = 1
				this.flag7 = 1
			},
			cho2(value) {
				this.$set(this.chooseArr, 1, this.xuexiao1[0][value])
				this.xueyuanlist1 = [];
				let date = new Date();
				let year = date.getFullYear();
				getxueyuan({
					"schoolCode": this.xuexiao1[0][value].schoolCode,
					"year": year
				}).then((res) => {
					for (let i in res.data) {
						let j = {}
						this.$set(j, "text", res.data[i].title)
						this.$set(j, "value", res.data[i].collegeCode)
						this.xueyuanlist1.push(j)
					}
				});
				this.flag6 = 2
				this.flag7 = 2
			},
			cho3(value) {
				this.$set(this.chooseArr, 2, this.xueyuanlist1[value])
				this.zhuanyelist1 = [];
				getzhuanye1({
					"schoolCode": this.chooseArr[1].schoolCode,
					"collegeCode": this.chooseArr[2].value,
					'year': new Date().getFullYear(),
				}).then((res) => {
					for (let i in res.data) {
						let j = {}
						this.$set(j, "text", res.data[i].title)
						this.$set(j, "value", res.data[i].majorCode)
						this.zhuanyelist1.push(j)
					}
				});
				this.flag6 = 3
				this.flag7 = 3
			},
			cho4(value) {
				this.$set(this.chooseArr, 3, this.zhuanyelist1[value])
				uni.setStorageSync('schoolData', JSON.stringify(this.chooseArr))
				this.handleSureMajor()
			},
			// 关闭选择弹框
			closeClick() {
				this.showPicker = false
			},
			handleSureMajor() {
				new Promise((resolve, reject) => {
					let flag = false;
					this.chooseArr.forEach((e, i) => {
						if (JSON.stringify(e) === '{}') {
							flag = true;
						}
						if (i === this.chooseArr.length - 1) {
							if (flag) reject();
							else resolve();
						}
					})
				}).then(() => {
					uni.setStorageSync('chooseArr', JSON.stringify(this.chooseArr));
					this.showPicker = false;
				}).catch(() => {
					uni.showToast({
						title: '还有数据没有选中！',
						icon: 'none'
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #F6F8F6;
		min-height: 100vh;
		padding-top: 60rpx;
		padding-left: 40rpx;
		padding-right: 40rpx;

		.submit {
			background-color: #F7DD5E;
			position: fixed;
			width: 280rpx;
			height: 90rpx;
			border-radius: 100rpx;
			box-shadow: 8rpx 6rpx 20rpx #666666;
			left: 50%;
			bottom: 300rpx;
			transform: translate(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item {
			margin-bottom: 20rpx;
			border-radius: 14rpx;
			font-size: 28rpx;
			color: #000;
			padding: 26rpx 36rpx;
			display: flex;
			align-items: center;

			.arrowRight {
				margin-left: auto;
			}
		}
	}

	.pickerLayer {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .15);
		z-index: 2;

		.layerMain {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 1200rpx;
			padding: 30rpx 0;
			box-sizing: border-box;
			border-radius: 40rpx 40rpx 0 0;
			background: #fff;
		}

		.layerTitle {
			text-align: center;
			position: relative;
			justify-content: space-around;

			// text-align: center;
			// position: relative;
			// .layerClose{
			// 	position: absolute;
			// 	right: 30rpx;
			// 	bottom: 0;
			// }
		}

		scroll-view {
			margin: 30rpx 0 0;
		}

		.chooseBox {
			// margin: 30rpx 0 0;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid $bordercolor;
			height: 80rpx;
			line-height: 80rpx;

			.commonChoose {
				padding: 0 40rpx;
				flex-shrink: 0;
			}

			.activeLayerStyle {
				border-bottom: 2px solid $colorMain;
			}
		}

		.dataBox {
			.dataScroll {
				height: 800rpx;
				overflow-y: scroll;
			}

			.scrollItem {
				padding: 0 30rpx;
				height: 100rpx;
				line-height: 100rpx;
				box-sizing: border-box;
				position: relative;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}

			.activeIcon {
				color: $colorMain !important;
				position: absolute;
				right: 30rpx;
				bottom: 0;
			}
		}
	}

	.popup-box {
		background: #fff;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx;
		// height: 960rpx;

		.btns {
			align-items: center;
			justify-content: space-between;
			margin: 10rpx 0;

			.cancel {
				color: #AFAFAF;
			}

			.sure {
				color: #F7DD5E;
			}
		}

		.search-contents {
			text-align: center;
			line-height: 70rpx;
			overflow-x: hidden;
			// height: 900rpx;
			// background: #F7DD5E;

			.chooseItem {
				background-color: rgba(253, 224, 128, 0.3);
				// background: #F7DD5E;
			}

			.more-search {
				text-align: left;

				.title {
					margin-top: 40rpx;
				}

				.tab-item {
					// width: 120rpx;
					padding: 20rpx 30rpx;
					background: rgba(175, 175, 175, 0.2);
					color: #333;
					border-radius: 50rpx;
					// border: 1px solid #333;
					height: 20rpx;
					text-align: center;
					line-height: 20rpx;
					margin: 10rpx 10rpx 10rpx 0;
				}


				.chooseItem {
					background-color: rgba(253, 224, 128, 0.3);
					border: 1px solid #F7DD5E;
				}
			}

			.score-search {
				margin-top: 80rpx;
				justify-content: space-between;

				view {
					border: 1px solid #ccc;
					border-radius: 4rpx;
					// margin-bottom: 20rpx;
					padding: 0 10rpx;
					color: #333;
				}

				input {
					text-align: left;
					width: 200rpx;
				}
			}
		}

		.search-contents-more {
			height: 900rpx;
		}
	}

	.subject {
		text-align: left;
		margin-top: 10rpx;
		font-weight: bolder;

		.tips {
			color: #969699;
			font-size: 24rpx;
			font-weight: normal;
		}
	}

	.line {
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.tag {
		color: #d0d0d4;
		margin-right: 2rpx;
	}
</style>